<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#div1{width: 30px; height: 600px; background-color: #000;position: absolute;left: 710px; top: 30px;}
	#div2{width: 30px; height: 30px; background-color: red;position: absolute;top: 0;left: 0;}/* 在父级内定位了 */
	#div3{width: 598px; height:598px; border: 1px solid #000;position: absolute;left: 100px;top: 30px;overflow: hidden}
	#div4{position: absolute;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv1 = document.getElementById('div1');
		var oDiv2 = document.getElementById('div2');
		var oDiv3 = document.getElementById('div3');
		var oDiv4 = document.getElementById('div4');

		oDiv2.onmousedown = function (ev){
			var ev = ev || event;

			var disY = ev.clientY - this.offsetTop;//不要单单就一个ev.clientY
			var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;		//滑块从0到底部的距离

			document.onmousemove = function (ev){
				var ev = ev || event;

				var T = ev.clientY - disY;	//div2移动的距离

				if (T < 0) {
					T = 0;
				}else if(T > iMaxTop){	//父子级关系且都定位了，就不要视觉上考虑父级的offsetTop了，因为子级本身就按照父级的内容定位
					T = iMaxTop;
				}

				oDiv2.style.top = T + 'px';

				var iScale = T/iMaxTop;
				oDiv4.style.top = (oDiv3.offsetHeight-oDiv4.offsetHeight)*iScale + 'px';

			}

			document.onmouseup = function(){
				document.onmousemove = document.onmouseup = null;
				oDiv2.removeCapture && oDiv2.removeCapture();
			}

			this.setCapture && this.setCapture();
			return false;
		}
	}
	</script>
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>
	<div id="div3">
		<div id="div4">百科蝌蚪团正式成立，4月10日，百科蝌蚪团第一批成员出现，4月26日蝌蚪团首页上线。[3] 
百科词条数增长情况
百科词条数增长情况 (2张)
2007年4月19日，词条页面改版，改良词条页面的行高和行宽，在词条页面的底部增加了汉英词典解释，改进历史版本页面；5月百科编辑词条积分调整；6月开放分类检索升级，历史版本增加翻页功能，百科优质版本标准出台；9月高级编辑器上线，百科任务改版。11月百科推出相关词条，可以在百度知道里搜索到百科词条。（百度百科历史首页图片相册图片来源：[4]  ）
2008年1月16日百度百科的第100万个词条诞生。
2008年4月21日，百度百科正式版上线，首页增加优质版本榜，优质词条栏目[4]  ；8月28日，百科帮助页更新，增加词条编辑原则；9月18日，词条浏览页升级[5]  。
百度百科周年庆活动图片
百度百科周年庆活动图片 (29张)
2009年9月15日，百度百科积分系统正式从百度知道中分离，拥有单独的一套积分体系。2009年12月29日，百科分类管理员主页上线。
2010年1月18日 百度百科登上百度首页，[6]  此次调整也意味着百科业务在百度版图中的地方上升。
2010年4月9日至11日 百度百科首次邀请33位用户齐聚北京共庆百度百科四周年。[7]  （百度百科周年庆活动图片图册图片来源：[7-9]  ）
2011年1月，“知识先锋”百度百科校园计划上线，这一计划是百度百科与全国重点高校合作开展的社会实践互动项目。（百度百科相关主题活动图片图册图片来源：[10-11]  ）
平台化
2012年5月18日百度百科数字博物馆正式上线，此举打破了以往网络上单纯以图片、文字为主的博物馆展品呈现模式，通过音频讲解、实境模拟、立体展现等多种形式，让用户通过互联网即可身临其境般地观赏展品，更平等便捷地了解历史文化。[12-13] 
2012年9月百科学术委员会权威上线，推动百度百科“专业精英+热情网民”模式为广大用户提供更为全面、系统、专业、权威的知识分享服务。[14] 
百度百科相关主题活动图片
百度百科相关主题活动图片 (17张)
2012年11月首个城市百科成都站上线[15]  ；城市百科为城市打造独特的城市网络名片，通过线上线下相结合的推广手段，有效的带动城市相关内容的建设，让更多的人了解这座城市。
2013年9月25日新版词条页上线，这是自2008年以来词条页进行的第3次改版，也是词条浏览页变化最大的一次。11月4日百科商城全新升级，各团队专区全部合并，且统一使用财富值兑换礼品。11月18日百科任务系统上线，在该任务平台，活动的发起、参与编辑、词条评审等全由科友负责，任务自主性更高， 这是百科用户团队及词条编辑评审的一次重大改革和进步。
2014年5月14日新版明星百科词条页升级上线，打破了以往枯燥的百科阅读方式，打造出一站式的明星信息聚合平台。[16] 
2014年9月12日，“词媒体”平台的百度百科全新改版上线，通过引入包括博物馆、书法家协会、卫计委等大量PGC资源，城市百科、明星百科等特型内容聚合页，百度百科突破了传统百科全书的模式局限，借助权威合作、词条质量优化、视觉升级、强化社会化协作等措施。[17] 
2014年12月5日，最高人民法院与百度联手，将全国各法院的详细准确信息发布在百度百科上，并以“中国法院地图”的形式集合呈现。承接最高人民法院在信息化上的新举措，作为全球最大的中文百科全书的百度百科，将成为全国法院大全的权威平台。[18] 
史记·2014
史记·2014
2014年12月底，推出百科年度总结篇《史记·2014》，以总榜单和分类特色榜单的形式盘点2014年的年度热词。[19] 
2015年2月9日，百度百科全球最大的海洋馆网上直播上线。[20]  4月1日，正式对外发布百度百科“行业名人词条”。“行业名人词条的建立，将为各行业名人与普通民众之间搭起桥梁，在互联网上去伪存真，建立最权威、真实、全方位展现当代行业名人风貌的信息库，成为个人品牌打造的新始发站。4月7日，百度百科陕西数字方志馆上线。[21-22] 
2015年5月，百科个人中心改版，透过百度百科的“数字窗口”，让人们能够更便捷地认知世界。[23] 
2015年7月15日，百度百科“艺术百科”正式上线，将艺术家、艺术作品、高品质的艺术展览等权威信息集合呈现到每个网民的面前，依托百度搜索强大的资源和百科大量的艺术家词条信息，简洁、快速、精准得到感兴趣的艺术类信息。7月21日，百度百科“科普中国·科学百科”专题上线，结合百度百科强大的平台影响力以及中国科协14个学会及国内顶尖专家资源，在互联网上开辟出了一块丰富权威的科普阵地。[24]  9月，百度百科上线“二战百科”专题，为中国人民抗日战争及世界反法西斯战争胜利70周年纪念日，推出再现历史的专题报道。
2015年12月27日，百度百科与房教中国在“第二届房教中国地产人年会暨第八届中国房地产策划师年会”上宣布正式合作，双方签署《关于地产百科战略合作协议》，携手打造打造专门针对地产垂直领域的“地产百科”。[25] 
2015年12月29日，百科推出《史记·2015》，在“史记2015”中，百度百科勇敢打破旧有模式，以三大主题:“殇.生之逝”、“耀.国之盛”、“鸣.民之声”，深度展现2015大事件。[26] </div>
	</div>
</body>
</html>